<template>
    <a-layout style="min-height: 100vh">
        <a-layout-sider
            class=" md:block hidden !fixed bottom-0 left-0 top-0 h-full z-50 !max-w-[224px] !min-w-[224px]  !w-56 ">
            <div class=" h-[60%] overflow-hidden">
                <div @click="createChats"
                    class="cursor-pointer text-white w-[214px] ml-[5px] mt-[5px] h-10 leading-[40px] rounded-md text-left border-solid border-[1px] border-white border-opacity-40">
                    <plus-outlined class=" a
          lign-baseline mr-2 ml-3 text-white" />
                    New chat
                </div>
                <ul class="w-[244px] h-full overflow-y-scroll">
                    <li v-for="(item, index) in chatLists" :key="item.id" @click="router.push({ path: `/chat/${item.id}` })"
                        class="chatItem flex justify-between items-center cursor-pointer hover:bg-white hover:bg-opacity-10 text-white w-[214px] ml-[5px] mt-[5px] h-10 leading-[40px] rounded-md  "
                        :class='{
                            "bg-white bg-opacity-10": route.params.id == item.id + ""
                        }'>
                        <template v-if="!item.is_edit">
                            <div class=" w-40 overflow-hidden whitespace-nowrap overflow-ellipsis">
                                <wechat-outlined class="  mr-2 ml-3 text-white" />
                                <span>{{ item.title }}</span>
                            </div>
                            <span class="ope mr-2">
                                <form-outlined @click.stop="editChat(item)" />
                                <delete-outlined @click.stop="deleteRecord(item.id, index)" class=" ml-2" />
                            </span>
                        </template>
                        <template v-else>
                            <a-input v-focus :ref="`ref${item.id}`"
                                class=" !w-40 !bg-transparent !text-white h-10 leading-[40px]"
                                v-model:value="chatInfo.title"></a-input>
                            <span class="mr-2">
                                <check-outlined @click.stop="submitTitle(item)" />
                                <close-outlined @click.stop="item.is_edit = false" class=" ml-2" />
                            </span>
                        </template>
                    </li>
                </ul>
            </div>
            <ul class=" h-[40%]">
                <li @click="clearCoversation"
                    class="chatItem flex items-center cursor-pointer hover:bg-white hover:bg-opacity-10 text-white w-[214px] ml-[5px] mt-[5px] h-10 leading-[40px] rounded-md  ">
                    <delete-outlined class="mr-2 ml-3" />
                    <span>清空记录</span>
                </li>
                <li @click="router.push({ name: 'subscription' })"
                    class="chatItem flex items-center cursor-pointer hover:bg-white hover:bg-opacity-10 text-white w-[214px] ml-[5px] mt-[5px] h-10 leading-[40px] rounded-md  ">
                    <shop-outlined class="mr-2 ml-3" />
                    <span>会员订阅</span>
                    <span class=" ml-10 text-[10px] h-5 leading-5 mt-1 text-black px-1 rounded-md bg-[#ffff99]">NEW</span>
                </li>
                <li @click="router.push({ name: 'setting' })" :class='{
                    "bg-white bg-opacity-10": route.name == "setting"
                }'
                    class="chatItem flex items-center cursor-pointer hover:bg-white hover:bg-opacity-10 text-white w-[214px] ml-[5px] mt-[5px] h-10 leading-[40px] rounded-md  ">
                    <setting-outlined class="mr-2 ml-3" />
                    <span>个人设置</span>
                </li>
                <li @click="router.push({ name: 'help' })" :class='{
                    "bg-white bg-opacity-10": route.name == "help"
                }'
                    class="chatItem flex items-center cursor-pointer hover:bg-white hover:bg-opacity-10 text-white w-[214px] ml-[5px] mt-[5px] h-10 leading-[40px] rounded-md  ">
                    <share-alt-outlined class="mr-2 ml-3" />
                    <span>客服帮助</span>
                </li>
                <li @click="quite"
                    class="chatItem flex items-center cursor-pointer hover:bg-white hover:bg-opacity-10 text-white w-[214px] ml-[5px] mt-[5px] h-10 leading-[40px] rounded-md  ">
                    <logout-outlined class="mr-2 ml-3" />
                    <span>退出登陆</span>
                </li>
            </ul>
        </a-layout-sider>
        <div class="md:hidden fixed z-30 top-0 left-0 w-full border-t bg-white h-12 flex items-center px-3 text-xl">
            <a-dropdown>
                <menu-outlined />
                <template #overlay>
                    <a-menu mode="inline" class=" w-full">
                        <a-menu-item key="1" @click="router.push({ path: '/create' })">
                            <plus-outlined class=" align-baseline mr-2 ml-3" />
                            New chat
                        </a-menu-item>
                        <a-menu-item v-for="{ id, title } in chatList" :key="id"
                            @click="router.push({ path: `/chat/${id}` })">
                            <wechat-outlined class=" align-baseline mr-2 ml-3 text-white" />
                            {{ title }}
                        </a-menu-item>
                        <a-menu-item key="1" @click="clearCoversation">
                            <span>清空记录</span>
                        </a-menu-item>
                        <a-menu-item key="2" @click="router.push({ name: 'subscription' })">
                            <span>会员订阅</span>
                        </a-menu-item>
                        <a-menu-item key="3" @click="router.push({ name: 'setting' })">
                            <span>个人设置</span>
                        </a-menu-item>
                        <a-menu-item key="4" @click="router.push({ name: 'help' })">
                            <span>客服帮助</span>
                        </a-menu-item>
                        <a-menu-item key="5" @click="quite">
                            <span>退出登陆</span>
                        </a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
        </div>
        <a-layout class=" md:ml-[223px] md:mt-0 mt-14">
            <a-layout-content>
                <div class=" h-full">
                    <router-view :key="route.fullPath" @getData='getData' />
                </div>
            </a-layout-content>
        </a-layout>
        <div v-if="admin" class=" fixed w-11 h-11 right-0 bottom-0  select-none z-50">
            <div v-show="show_manage" style="width: 100vw;"
                class=" leading-[44px] pr-12 absolute right-0 bottom-0 opacity-80 transition-opacity duration-300 w-full bg-black h-11 text-right">
                <span class=" text-white cursor-pointer" @click="router.push({ path: '/manage' })">
                    <credit-card-outlined class=" align-middle mr-1" />
                    进入后台
                </span>
            </div>
            <div v-show="!show_manage" @click="show_manage = true"
                class=" cursor-pointer absolute w-0 h-0 border-solid border-0 border-t-0 border-l-0 border-b-[44px] border-l-[44px] border-transparent  border-b-black">
            </div>
            <div @click="show_manage = !show_manage" :class="{ 'seleced': show_manage }"
                class="cursor-pointer absolute w-3 h-3 right-[17px] top-[17px] add"></div>
        </div>
        <div class="text-gray-400 fixed bottom-0 md:pl-52 left-0 w-full text-center mb-1">
            <a target="_blank" href="https://docs.qq.com/doc/DVHRXRmhKZ2Jza0Vw" class="mr-1 text-gray-400">免责声明</a>
            |
            <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index"
                class=" ml-1 text-gray-400">粤ICP备2023060944号</a>
        </div>

        <loading />
    </a-layout>
</template>
<script lang="ts" setup>
import loading from '@/components/loading.vue'
import {
    clear_coversations,
    create_chats,
    delete_chats,
    get_chats,
    update_chats,
} from '@/request/api'
import main from '@/store/index'
import { decrypt } from '@/utils/crypto'
import {
    CheckOutlined,
    CloseOutlined,
    CreditCardOutlined,
    DeleteOutlined,
    FormOutlined,
    LogoutOutlined,
    MenuOutlined,
    PlusOutlined,
    SettingOutlined,
    ShareAltOutlined,
    ShopOutlined,
    WechatOutlined
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import Modal from 'ant-design-vue/lib/modal'
import Cookies from 'js-cookie'
import { storeToRefs } from 'pinia'
import { Directive, DirectiveBinding } from 'vue'
const admin = JSON.parse(decrypt(Cookies.get('info'))).admin
const { chatList, askStatus, askContent, currentChatId } = storeToRefs(main())
let router = useRouter()
let route = useRoute()
let show_manage = ref<boolean>(false)
let chatLists = ref<any[]>([])
const chatInfo = reactive({
    id: 0,
    title: '',
})
const getData = () => {
    get_chats().then((res) => {
        if (res.code == 200) {
            chatLists.value = res.result.chats.map((item: any) => {
                item.is_edit = false
                return item
            })
        }
    })
}
let selectedKeys = ref<string[]>(['1'])
onMounted(() => {
    getData()
})
const quite = () => {
    Cookies.remove('info')
    router.push({ name: 'login' })
}
const clearCoversation = () => {
    Modal.confirm({
        title: '温馨提示',
        content: '是否确定清空全部对话!',
        onOk() {
            clear_coversations().then((res) => {
                if (res.code == 200) {
                    message.success('清空成功!')
                    getData()
                    chatList.value = []
                    askStatus.value = 0
                    askContent.value = ''
                    currentChatId.value = '0'
                    if (route.name == 'chat') {
                        router.push({ name: 'create' })
                    }
                }
            })
        },
    })
}
const deleteRecord = (id: number, index: number) => {
    Modal.confirm({
        title: '温馨提示',
        content: '是否确定删除该项!',
        onOk() {
            delete_chats(id).then((res) => {
                if (res.code == 200) {
                    message.success('已删除！')
                    getData()
                    chatLists.value.splice(index, 1)
                    console.log(chatLists.value)
                    if (route.params.id == id + "") {
                        if (chatLists.value.length > 0) {
                            router.push({ path: `/chat/${chatLists.value[0].id}` })
                        } else {
                            router.push({ path: `/create` })
                        }
                    }
                }
            })
        },
    })
}
const editChat = (record: any) => {
    chatInfo.id = record.id
    chatInfo.title = record.title
    record.is_edit = true
}

// 创建窗口
const createChats = () => {
    create_chats().then((res) => {
        if (res.code == 200) {
            chatLists.value.unshift(res.result.chat)
            router.push({ path: `/chat/${res.result.chat.id}` })
        }
    })
}

const submitTitle = (record: any) => {
    if (chatInfo.title && chatInfo.title != record.title) {
        update_chats({
            id: record.id,
            title: chatInfo.title,
        }).then((res) => {
            if ((res.code = 200)) {
                message.success('更新成功')
                record.is_edit = false
                getData()
            }
        })
    } else if (!chatInfo.title) {
        message.warn('窗口名称不可为空')
    } else {
        record.is_edit = false
    }
}
const vFocus: Directive = {
    mounted(el: HTMLElement, binding: DirectiveBinding) {
        el.focus()
    },
}
watch(
    () => router.currentRoute.value.path,
    (newVal, oldVal) => {
        if (oldVal == '/create') {
            getData()
        }
    }
)
</script>
<style>
.site-layout .site-layout-background {
    background: #fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
    background: #141414;
}

.ope {
    display: none;
}

.chatItem:hover .ope {
    display: block;
}

.chatItem .ant-input {
    background-color: transparent;
    color: white;
}

.add {
    transition: all 0.3s ease 0s;
    transform: rotate(45deg) translate3d(12px, 0px, 0px);
    background: url('') no-repeat;
}

.add.seleced {
    transform: rotate(0deg) translate3d(0px, 0px, 0px);
}
</style>
  